<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page, index) of pages" :key="index">
                <div
                        class="icon"
                        v-for="item of page"
                        :key="item.id"
                >
                    <div class='icon-img'>
                        <img class='icon-img-content' :src='item.imgUrl'/>
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component({
        name: 'HomeIcons',
    })

    export default class Icons extends Vue {
        @Prop()
        private lists!: [];

        private swiperOption: object = {
            autoplay: false
        };

        get pages() {
            const icons: any[] = [];
            this.lists.forEach((item: object, index: number) => {
                const inx: number = Math.floor(index / 8);
                if (!icons[inx]) {
                    icons[inx] = []
                }
                icons[inx].push(item)
            });
            return icons
        }

    }

</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl'
    @import '~@/assets/styles/mixin.styl'

    .icons >>> .swiper-container
        height: 0
        padding-bottom: 50%

    .icons
        margin-top: .1rem

        .icon
            position: relative
            overflow: hidden
            float: left
            width: 25%
            height: 0
            padding-bottom: 25%

            .icon-img
                position: absolute
                top: 0
                left: 0
                right: 0
                bottom: .44rem
                box-sizing: border-box
                padding: .1rem

                .icon-img-content
                    display: block
                    margin: 0 auto
                    height: 100%

            .icon-desc
                position: absolute
                left: 0
                right: 0
                bottom: 0
                height: .44rem
                line-height: .44rem
                text-align: center
                color: $darkTextColor
                ellipsis()
</style>